<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
let MyChart = null;
export default defineComponent({
  name: "SectionThree",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      data_1: 25,
      data_2: 12,
      data_3: 7,
      // 换热站数据
      listData: [],
      // 供热站数据
      listData_: [],
      activeId: 'error',
      listTabData: [{
        name: '异常率',
        id: 'error'
      }, {
        name: '投诉率',
        id: 'tousu'
      }]
    }
  },
  mounted() {
    // this.init();
    setTimeout(() => {
      this.setSelect(this.activeId);
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    initError() {
      this.listData = [
        {
          heatRsName: "龙发",
          pressRate: "10%",
          temRate: "0%",
        }, {
          heatRsName: "能源发展",
          pressRate: "12%",
          temRate: "0.4%",
        }, {
          heatRsName: "开源胶州",
          pressRate: "3.4%",
          temRate: "0.78%",
        }, {
          heatRsName: "兆源",
          pressRate: "2.05%",
          temRate: "0%",
        }, {
          heatRsName: "中节能",
          pressRate: "45%",
          temRate: "0%",
        }, {
          heatRsName: "家盛",
          pressRate: "7.9%",
          temRate: "5%",
        }, {
          heatRsName: "幸福源",
          pressRate: "7.24%",
          temRate: "0.6%",
        },
        {
          heatRsName: "海能达",
          pressRate: "7.4%",
          temRate: "1.34%",
        },
        {
          heatRsName: "新阳",
          pressRate: "7.24%",
          temRate: "0.6%",
        },
        {
          heatRsName: "暖域",
          pressRate: "7.4%",
          temRate: "1.34%",
        }
      ]
    },
    initTousu() {
      function getRandomNum(length, max, min) {
        return new Array(length).fill().map(() => Math.floor(Math.random() * (max - min + 1)) + min);
      }
      const option = {
        grid: {
          top: "20%",
          right: "8%",
          bottom: "15%",
          left: "8%"
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let result = params[0].name + '<br/>';
            params.forEach(param => {
              result += param.marker + param.seriesName + ' : ' + param.value + ' ' + '%<br/>';
            });
            return result;
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: false
            }
          },
          textStyle: {
            fontFamily: 'ALIBABAPUHUI-REGU'
          }
        },
        // legend: {
        //   data: ["投诉率"],
        //   left: 20,
        //   top: 5,
        //   itemWidth: 13,
        //   itemHeight: 8,
        //   borderRadius: 0,
        //   icon: 'rect',
        //   itemStyle: {
        //     borderColor: '#fff',
        //     borderWidth: 1,
        //   },
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14',
        //     fontFamily: 'ALIBABAPUHUI-REGU'
        //   }
        // },
        xAxis: {
          data: ['龙发', '能源发展', '开源胶州', '兆源', '中节能', '家盛', '幸福源', '海能达', '新阳', '暖域'],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            rotate: 45,
            align: 'center',
            margin: 20,
            textStyle: {
              color: '#fff',
              fontSize: '14',
              fontFamily: 'alimamashuheiti',
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
            }
          }
        },
        yAxis: [
          {
            type: "value",
            name: "(%)",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14,
              fontFamily: 'ALIBABAPUHUI-REGU'
            },
            position: "left",
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              formatter: "{value}", //右侧Y轴文字显示
              textStyle: {
                color: '#fff',
                fontSize: '14',
                fontFamily: 'ALIBABAPUHUI-REGU'
              }
            }
          }
        ],
        series: [
          {
            name: "投诉率",
            type: "bar",
            barWidth: 12,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(254, 88, 36, 1)"
                },
                  {
                    offset: 1,
                    color: "rgba(254, 88, 36, 0.2)"
                  }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(255, 255, 255, 0.9)"
                },
                  {
                    offset: 1,
                    color: "rgba(255, 255, 255, 1)"
                  }
                ]),
                borderWidth: 1
              }
            },
            data: getRandomNum(10, 5, 20)
          }
        ],
        dataZoom: [{
          type: 'inside',
        }]
      };
      MyChart = echarts.init(document.getElementById('Yunxingjiance-o'));
      MyChart.setOption(option);
    },
    setSelect(e) {
      if (MyChart) {
        MyChart.dispose();
      }
      if (e === 'error') {
        this.initError();
        this.activeId = 'error'
      } else {
        this.activeId = 'tousu'
        setTimeout(() => {
          this.initTousu();
        }, 100)
      }
    }
  }
});
</script>
<template>
  <div class="section-three">
    <GlobalCard style="position: relative" :mainTitle="'运行监测'" :activeId="activeId" :showSelect="true" :listData="listTabData" @change="(e) => { setSelect(e) }">
      <template #body>
        <!-- 代码 -->
        <div id="Yunxingjiance" v-if="activeId === 'error'">
          <el-table class="self-table" :data="listData"
                    show-overflow-tooltip style="width: 100%; padding-right: 10px"
            height="100%" header-row-class-name="main-table-header">
            <el-table-column type="index" label="序号" width="30" align='center' />
            <el-table-column prop="heatRsName" label="热源名" align='center'>
              <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui">
                    {{ row.heatRsName }}
                  </span>
              </template>
            </el-table-column>
            <el-table-column prop="pressRate" label="压力异常率" align='center'>
              <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui">
                    {{ row.pressRate }}
                  </span>
              </template>
            </el-table-column>
            <el-table-column prop="temRate" label="温度异常率" align='center'>
              <template #default="{ row }">
                  <span class="cursor-pointer font-AlibabaPuhui">
                    {{ row.temRate }}
                  </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div id="Yunxingjiance-o" v-else></div>
      </template>
    </GlobalCard>
  </div>
</template>
<style>
.el-table.self-table {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  padding-right: 0 !important;
}

.el-table.self-table .el-table__cell {
  padding: 5px 0;
}

.el-table.self-table .el-table__header .cell {
  color: #0bf9fe;
  font-weight: 100;
  padding: 0;
  text-align: center;
  font-size: 12px;
  font-family: "FANGZHENG-BLACK" !important;
}

.el-table.self-table th.el-table__cell {
  background-color: rgba(21, 77, 160, 0.2);
}

.el-table.self-table tr {
  background-color: transparent;
}

.el-table.self-table.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: transparent;
}

.el-table.self-table.el-table--enable-row-hover .el-table__body tr:hover {
  background-image: linear-gradient(270deg,
      rgba(26, 123, 230, 0) 0%,
      rgba(69, 193, 255, 0.9) 100%);
}

.el-table.self-table.el-table--enable-row-transition .el-table__body td.el-table__cell {
  border-bottom: none;
}

.el-table.self-table.el-table--fit .el-table__inner-wrapper:before {
  display: none;
}

.el-table.self-table td.el-table__cell,
.el-table.self-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

.main-search .el-input__wrapper {
  background-color: rgba(4, 87, 177, 0.2);
  box-shadow: 0 0 0 1px #1d68be inset;
}

.main-search .el-input__inner {
  color: #fff;
}

.self-popover.el-popper.is-light,
.self-popover.el-popper.is-light>.el-popper__arrow:before {
  background-color: rgba(0, 24, 50, 0.9);
  border: 1px solid #1d68be;
}

.self-popover.el-popover.el-popper {
  color: #fff;
}

.content.real-date .el-range-editor.el-input__wrapper {
  box-shadow: none;
}

.content.real-date .el-date-editor .el-range-input {
  color: #fff;
}

:root {
  //--el-bg-color-overlay: rgba(0, 0, 0, 0);
}

.self-date-picker.el-popper {
  border: 1px solid #1d68be;
}

.self-date-picker .el-date-range-picker {
  background-color: rgba(0, 24, 50, 0.9);
}

.self-date-picker .el-date-range-picker {
  --el-datepicker-inner-border-color: rgba(0, 0, 0, 0);
}

.real-date .el-input__wrapper {
  background-color: rgba(4, 87, 177, 0.2);
}

.self-date-picker .el-date-table td.in-range .el-date-table-cell {
  background-color: rgba(22, 112, 247, 0.3);
}

.self-date-picker .el-picker-panel {
  color: #fff;
}
</style>
<style scoped lang="less">
.near-normal {
  color: #f93030;

  &.is-near-date {
    color: #02ff7f;
  }
}

.section-three {
  position: fixed;
  top: 70rem;
  left: 2rem;
}

#Yunxingjiance {
  width: 100%;
  height: 31rem;
  overflow-y: auto;
}
#Yunxingjiance-o {
  width: 100%;
  height: 31rem;
  overflow-y: auto;
}
</style>